<template>
  <div>
    <div>
      <el-input v-model="name" placeholder="请输入配送员姓名" style="width: 180px;float: left;padding-left: 10px"
      ></el-input>
      <el-select v-model="districtId" clearable placeholder="请选择所属区域" style="width: 180px;float: left;padding-left: 10px"
      >
        <el-option
            v-for="item in addressData"
            :key="item.id"
            :label="item.district"
            :value="item.id"
            style="float: left;padding-left: 10px"
        >
        </el-option>
      </el-select>
      <el-select v-model="productTeamId" clearable placeholder="请选择所属组" style="width: 180px;float: left;padding-left: 10px"
      >
        <el-option
            v-for="item in productTeam"
            :key="item.id"
            :label="item.name"
            :value="item.id"
            style="float: left;padding-left: 10px"
        >
        </el-option>
      </el-select>
      <el-button type="primary" plain style="margin-left: 5px;" @click="search">查询</el-button>
      <el-button type="success" plain style="margin-left: 5px;" @click="save" >新增</el-button>
      <el-button type="danger" plain style="margin-left: 5px;" @click="dropBatch" >批量删除</el-button>
    </div>
    <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
    >
      <el-table-column
          type="selection"
          width="55">
      </el-table-column>
      <el-table-column
          prop="name"
          label="姓名"
          width="120">
      </el-table-column>
      <el-table-column
          prop="age"
          label="年龄"
          width="120">
      </el-table-column>
      <el-table-column
          prop="gender"
          label="性别"
          width="120">
      </el-table-column>
      <el-table-column
          prop="phone"
          label="联系电话"
          width="120">
      </el-table-column>
      <el-table-column
          prop="district.district"
          label="所属区"
          width="120">
      </el-table-column>
      <el-table-column
          prop="productTeam.name"
          label="所在组"
          width="100">
      </el-table-column>
      <el-table-column
          prop="remark"
          label="备注"
          width="120">
      </el-table-column>
      <!--      //删除修改按钮-->
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
              size="mini"
              @click="handleEdit(scope.row)">修改</el-button>
          <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--    分页栏-->
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="curPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>
    <!--新增对话框-->
    <el-dialog title="配送员信息编辑"  :visible.sync="dialogFormVisible" @close="clearForm" center>
      <el-form :model="form" :rules="rules" ref="ruleForm">
        <el-form-item label="姓名" :label-width="formLabelWidth" prop="name">
          <el-input v-model="form.name" autocomplete="off" placeholder="请输入省名称"></el-input>
        </el-form-item>
        <el-form-item label="年龄" :label-width="formLabelWidth" prop="age">
          <el-input v-model="form.age" autocomplete="off" placeholder="请输入市名称"></el-input>
        </el-form-item>
        <el-form-item label="性别" :label-width="formLabelWidth" prop="gender">
          <el-input v-model="form.gender" autocomplete="off" placeholder="请输入区名称"></el-input>
        </el-form-item>
        <el-form-item label="手机号" :label-width="formLabelWidth" prop="gender">
          <el-input v-model="form.phone" autocomplete="off" placeholder="请输入区名称"></el-input>
        </el-form-item>
        <el-form-item label="登录密码" :label-width="formLabelWidth" prop="gender">
          <el-input v-model="form.pass" autocomplete="off" placeholder="请输入密码"  type="password"></el-input>
        </el-form-item>
        <el-form-item label="所属区域" :label-width="formLabelWidth" prop="districtId">
          <el-select v-model="form.districtId" clearable placeholder="请选择所属区域">
            <el-option
                v-for="item in addressData"
                :key="item.id"
                :label="item.district"
                :value="item.id"
                style="width: 200px">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属产品组" :label-width="formLabelWidth" prop="productId">
          <el-select v-model="form.productId" clearable placeholder="请选择所属区域">
            <el-option
                v-for="item in productTeam"
                :key="item.id"
                :label="item.name"
                :value="item.id"
                style="width: 200px">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="ensure">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "courier",
  data(){
    return{
      name:'',
      tableData:[],
      addressData:[],
      productTeam:[],
      curPage:1,
      pageSize:5,
      total:0,
      districtId:'',
      productTeamId:'',
      form:{
        id:'',
        name:'',
        age:'',
        gender:'',
        phone:'',
        pass:'',
        districtId:'',
        productId:'',
        remark:''
      },
      dialogFormVisible:false,
      formLabelWidth:'120px',
      rules:{
        age:[
          { required: true, message: '请输入年龄', trigger: 'blur' }
        ],
        name:[
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ],
        phone:[
          { required: true, message: '请输入电话', trigger: 'blur' }
        ],
        gender:[
          { required: true, message: '请输入性别', trigger: 'blur' }
        ],
        districtId:[
          { required: true, message: '请选择所属区域', trigger: 'blur' }
        ],
        productId:[
          { required: true, message: '请选择所在产品组', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.init()
    this.getProductTeam()
    this.getAddress()
  },
  methods:{
    clearForm(){
      this.form.id=''
      this.form.name=''
      this.form.age=''
      this.form.phone=''
      this.form.gender=''
      this.form.pass=''
      this.form.districtId=''
      this.form.productId=''
      this.form.remark=''
    },
    //编辑对话框确定按钮
    async ensure(){
      this.$refs.ruleForm.validate(async valid=> {
        let url
        if(this.form.id===''){
          url='/courier/save'
        }else {
          url='/courier/modify'
        }
        if (valid) {
          let res=await  this.$axios.get(url,{
            params:this.form
          })
          if(res.data.code===200){
            this.dialogFormVisible=false
            this.init()
          }else {
            alert("操作失败")
          }
        } else {
          /*console.log('error submit!!');*/
          return false;
        }
      })
    },
    //编辑
    handleEdit(row){
      this.form.id=row.id
      this.form.name=row.name
      this.form.age=row.age
      this.form.gender=row.gender
      this.form.pass=''
      this.form.phone=row.phone
      this.form.districtId=row.district.id
      this.form.productId=row.productTeam.id
      this.form.remark=row.remark
      this.dialogFormVisible=true
    },
    //批量删除
    dropBatch(){
      let ids=this.$refs.multipleTable.selection
      if(ids.length===0){
        this.$message({
          type: 'warning',
          message: '你还没有选择要删除的配送员!'
        });
        return
      }
      let temp=''
      ids.forEach((item,i)=>{
        temp+='&id='+item.id
      })
      temp=temp.substring(1)
      this.$confirm('此操作将永久删除该员工, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let res=await this.$axios.get('/courier/drop?'+temp)
        if(res.data.code===200){
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.curPage=1
          this.init()
        }else {
          this.$message({
            type: 'error',
            message: '删除失败'
          });
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //删除
    async handleDelete(row) {
      this.$confirm('此操作将永久删除该仓库, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let res=await this.$axios.get('/courier/drop?id='+row.id)
        if(res.data.code===200){
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.curPage=1
          this.init()
        }else {
          this.$message({
            type: 'error',
            message: '删除失败!'
          });
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
      /*console.log(row);*/
    },
    //新增
    save(){
      this.dialogFormVisible=true
    },
    //查询
    search(){
      this.curPage=1
      this.init()
    },
    //多条件分页查询
    async init(){
      let res=await this.$axios.get('/courier/queryByPage',{
        params:{
          curPage:this.curPage,
          pageSize:this.pageSize,
          productTeamId:this.productTeamId,
          districtId:this.districtId,
          name:this.name
        }
      })
      this.tableData=res.data.data
      this.total=res.data.total
    },
    async getAddress(){
      let res=await this.$axios.get('/courier/queryDistrict')
      this.addressData=res.data.data
    },
    async getProductTeam(){
      let res=await this.$axios.get('/productTeam/queryAll')
      this.productTeam=res.data.data
    },
    handleSizeChange(val) {
      this.pageSize=val
      this.init()
      // console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.curPage=val
      this.init()
      // console.log(`当前页: ${val}`);
    }
  }
}
</script>

<style scoped>

</style>